<template>
   <div class="cash">

     <div class="form">
        <div class="input-ground">
          <div class="weui-cells__title">姓名</div>
          <div class="weui-cells">
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <i class="icon iconfont name">&#xe635;</i>
                <input class="weui-input" type="text" placeholder="请输入姓名" v-model="form.name">
              </div>
            </div>
          </div>
        </div>
       <div class="input-ground">
         <div class="weui-cells__title">{{accountType === 'wx' ? '微信号' : accountType === 'yhk' ? '银行卡号' : '支付宝账号'}}</div>
         <div class="weui-cells">
           <div class="weui-cell">
             <div class="weui-cell__bd">
               <i class="icon iconfont" :class="accountType === 'wx' ? 'wx' : accountType === 'yhk' ? 'yhk' : 'zfb'">{{accountType === 'wx' ? '&#xe618;' : accountType === 'yhk' ? '&#xe605;' : '&#xe61a;'}}</i>
               <input class="weui-input" @input='yhkSet()'  type="text" v-model="form.number" value="weui input error" placeholder='请输入银行卡号' v-if="accountType === 'yhk'">
               <input class="weui-input"  type="text" v-model="form.number" value="weui input error" :placeholder="accountType === 'wx' ? '请输入微信号' : '请输入支付宝账号'" v-else>
             </div>
           </div>
         </div>
       </div>
       <div class="input-ground">
         <div class="weui-cells__title">手机号</div>
         <div class="weui-cells">
           <div class="weui-cell">
             <div class="weui-cell__bd">
               <i class="icon iconfont phone">&#xe62d;</i>
               <input class="weui-input" type="number" placeholder="请输入手机号" v-model="form.tel">
             </div>
           </div>
         </div>
       </div>
       <div class="input-inline">
         <div class="weui-cells">
           <div class="weui-cell">
             <div class="weui-cell__bd">
               <div>
                  <i>&yen;</i>
                  <input class="weui-input" type="number" :placeholder="'可转出' + moneybag" v-model="form.cash" @input="changeMoneybag">
               </div>
               <span class="color-2f" @click="enteringAmount" style="display: inline-block; height: 100%">全部转出</span>
             </div>
           </div>
         </div>
       </div>
       <div class="footer-box">
         <a href="javascript:;" class="weui-btn weui-btn_primary" @click="cashClick()">确认提现</a>
         <p>
           注意:请填写详细的收款卡信息，以免弄错账号，或者提现失败
         </p>
       </div>
     </div>

     <!--// 提交成功-->
     <div class="dialog-box" v-show="dialogSuccess">
       <div class="weui-mask"></div>
       <div class="weui-dialog">
         <div class="weui-dialog__hd"><strong class="weui-dialog__title">提现成功</strong></div>
         <div class="weui-dialog__bd">
           <div class="icon-box">
             <i class="icon iconfont">&#xe6bc;</i>
           </div>
           <p class="jb color-6">
             提现申请成功,客服在1-3天内与您联系,请保持电话通畅。
           </p>
         </div>
         <div class="weui-dialog__ft">
           <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" style="color:#42aaff"  @click="dialogBox('success')">确认</a>
         </div>
       </div>
     </div>

     <!--提交失败-->
     <div class="dialog-box" v-show="dialogFail">
       <div class="weui-mask"></div>
       <div class="weui-dialog">
         <div class="weui-dialog__hd" style="border-top-color:#f6a835;"><strong class="weui-dialog__title" style="color:#f6a835;">操作提醒</strong></div>
         <div class="weui-dialog__bd">
           <div class="icon-box">
             <i class="icon iconfont" style="color: #f6a835">&#xe619;</i>
           </div>
           <p class="jb color-6">
             您的提现失败，请注意查看是否填写有效的账户信息.
           </p>
         </div>
         <div class="weui-dialog__ft">
           <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" style="color: #f6a835" @click="dialogBox()">确认</a>
         </div>
       </div>
     </div>

     <div class="dialog-box" v-show="cashFail">
       <div class="weui-mask"></div>
       <div class="weui-dialog">
         <div class="weui-dialog__hd" style="border-top-color:#f6a835;"><strong class="weui-dialog__title" style="color:#f6a835;">操作提醒</strong></div>
         <div class="weui-dialog__bd" style="align-items: center;justify-content: flex-start;">
           <div class="icon-box">
             <i class="icon iconfont" style="color: #f6a835">&#xe619;</i>
           </div>
           <p class="jb color-6">
             提现金额超出！
           </p>
         </div>
         <div class="weui-dialog__ft">
           <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" style="color: #f6a835" @click="dialogBox()">确认</a>
         </div>
       </div>
     </div>

   </div>
</template>
<script>
  import { mapState } from 'vuex';
  import * as api from 'api';
  let isEntry = false;
  export default {
    data () {
      return {
        accountType: 'wx',
        dialogSuccess: false,
        dialogFail: false,
        cashFail: false,
        form: {
          name: '',
          number: '',
          tel: '',
          cash: ''
        }
      }
    },

    computed: {
      ...mapState({
        moneybag: state => state.userInfo.operatingAmount
      })
    },

    methods: {
      yhkSet () {
        if (isEntry) {
          isEntry = !isEntry;
          return false;
        };
        this.form.number = this.form.number.replace(/\s/g, '').replace(/(.{4})/g, '$1 ')
        isEntry = /\s$/.test(this.form.number)
      },
      changeMoneybag () {
        this.form.cash > this.moneybag ? this.form.cash = this.moneybag : this.form.cash = this.form.cash
      },
      dialogBox (data) {
        if (data === 'success') {
          this.dialogSuccess = false
          this.$router.push({ path: '/operating' })
        }
        this.dialogFail = false
        this.cashFail = false
      },

      // 获取账户信息
      getWithdrawAccount () {
        api.getWithdrawAccount({
          agencyId: this.$store.state.userInfo.id,
          accountType: this.accountType === 'wx' ? 1 : this.accountType === 'zyb' ? 2 : this.accountType === 'yhk' ? 3 : -1
        })
          .then((res) => {
            if (res.resultData === '') {
              return
            }
            this.form.name = res.resultData[0].agencyName
            this.form.tel = res.resultData[0].cellphone
            this.form.number = res.resultData[0].account
          })
      },

      // 提现
      cashClick () {
        if (this.form.cash > this.moneybag) {
          this.cashFail = true
          return
        }
        if (this.form.name === '') {
          this.Toast('请输入用户名');
          return;
        }
        if (this.form.number === '') {
          this.Toast('请输入账户');
          return;
        }
        if (this.form.tel === '') {
          this.Toast('请输入手机号码');
          return;
        } else if (!/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(this.form.tel)) {
          this.Toast('请输入正确的手机号码');
          return;
        }
        if (this.form.cash === '') {
          this.Toast('请输入提现金额');
          return;
        } else if (+this.form.cash < 100) {
          this.Toast('少于100元，暂不支持提现');
          return;
        }
        var data = {
          agencyId: this.$store.state.userInfo.id,
          agencyName: this.form.name,
          account: this.form.number.replace(/\s/g, ''),
          amount: this.form.cash,
          cellPhone: this.form.tel,
          accountType: this.accountType === 'wx' ? 1 : this.accountType === 'zyb' ? 2 : this.accountType === 'yhk' ? 3 : -1
        }
        api.cash(data)
          .then(res => {
            this.dialogSuccess = true;
          })
          .catch(error => {
            console.log(error)
            this.dialogFail = true
          })
      },

      // 向文本框加入金额
      enteringAmount () {
        this.form.cash = this.moneybag;
      }
    },
    created () {
      this.accountType = this.$route.params.type;
      this.getWithdrawAccount()
    },
    mounted () {
      this.title('提现');
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../../styles/agent/personal/cash';
</style>
